<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>接单流程</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/hui/Hui.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/js/layer/skin/layer.css"/>
    <script src="__PUBLIC__/js/fastclick.js"></script>
    <style>
        body {
        }
    </style>
</head>
<body>
<img src="__PUBLIC__/images/help/orders_process/order_process.png" alt="" width="100%" align="left"/>

<div class="H-flexbox-horizontal H-padding-horizontal-both-25 H-float-left"
     style="background-image: url('__PUBLIC__/images/help/orders_process/img_1/bg_1.png');background-size: 100%">
    <div id="layer-photos-1" class="H-flex-item" onclick="to_be_the_bner_2();">
        <img src="__PUBLIC__/images/help/orders_process/img_1/to_be_the_bner-2.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_1/to_be_the_bner-2.png" alt="" width="100%;"/>
    </div>
    <div id="layer-photos-2" class="H-flex-item H-margin-horizontal-both-15" onclick="to_be_the_bner_3();">
        <img src="__PUBLIC__/images/help/orders_process/img_1/to_be_the_bner-3.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_1/to_be_the_bner-3.png" alt="" width="100%;"/>
    </div>
    <div id="layer-photos-3" class="H-flex-item" onclick="to_be_the_bner_4();">
        <img src="__PUBLIC__/images/help/orders_process/img_1/to_be_the_bner-4.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_1/to_be_the_bner-4.png" alt="" width="100%;"/>
    </div>
</div>
<img src="__PUBLIC__/images/help/orders_process/text_1.png" alt="" width="100%" align="left"/>

<div class="H-flexbox-horizontal H-padding-horizontal-both-25 H-float-left"
     style="background-image: url('__PUBLIC__/images/help/orders_process/img_2/bg_2.png');background-size: 100%">
    <div id="layer-photos-4" class="H-flex-item" onclick="to_be_the_bner_5();">
        <img src="__PUBLIC__/images/help/orders_process/img_2/to_be_the_bner-6.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_2/to_be_the_bner-6.png" alt="" width="100%;"/>
    </div>
    <div id="layer-photos-5" class="H-flex-item H-margin-horizontal-both-15" onclick="to_be_the_bner_6();">
        <img src="__PUBLIC__/images/help/orders_process/img_2/to_be_the_bner-7.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_2/to_be_the_bner-7.png" alt="" width="100%;"/>
    </div>
    <div id="layer-photos-6" class="H-flex-item" onclick="to_be_the_bner_7();">
        <img src="__PUBLIC__/images/help/orders_process/img_2/to_be_the_bner-9.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_2/to_be_the_bner-9.png" alt="" width="100%;"/>
    </div>
</div>
<img src="__PUBLIC__/images/help/orders_process/text_2.png" alt="" width="100%" align="left"/>

<div class="H-flexbox-horizontal"
     style="background-image: url('__PUBLIC__/images/help/orders_process/img_3/bg_3.png');background-size: 100%">
    <div id="layer-photos-7" class="H-flex-item H-horizontal-center" onclick="listener_1();">
        <img src="__PUBLIC__/images/help/orders_process/img_3/listener-1.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_3/listener-1.png" alt="" width="100px;"/>
    </div>
</div>
<img src="__PUBLIC__/images/help/orders_process/text_3.png" alt="" width="100%" align="left"/>

<div class="H-flexbox-horizontal H-padding-horizontal-both-25 H-float-left"
     style="background-image: url('__PUBLIC__/images/help/orders_process/img_4/bg_4.png');background-size: 100%">
    <div id="layer-photos-8" class="H-flex-item" onclick="task_details_1();">
        <img src="__PUBLIC__/images/help/orders_process/img_4/task_details_2.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_4/task_details_2.png" alt="" width="100%;"/>
    </div>
    <div id="layer-photos-9" class="H-flex-item H-margin-horizontal-both-15" onclick="task_details_2();">
        <img src="__PUBLIC__/images/help/orders_process/img_4/task_details_3.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_4/task_details_3.png" alt="" width="100%;"/>
    </div>
    <div id="layer-photos-10" class="H-flex-item" onclick="task_details_3();">
        <img src="__PUBLIC__/images/help/orders_process/img_4/task_details_4.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_4/task_details_4.png" alt="" width="100%;"/>
    </div>
</div>
<img src="__PUBLIC__/images/help/orders_process/text_4.png" alt="" width="100%" align="left"/>

<div class="H-flexbox-horizontal H-padding-horizontal-both-25 H-float-left"
     style="background-image: url('__PUBLIC__/images/help/orders_process/img_5/bg_5.png');background-size: 100%">
    <div id="layer-photos-11" class="H-flex-item H-margin-horizontal-right-20" onclick="appointment_1();">
        <img src="__PUBLIC__/images/help/orders_process/img_5/appointment_1.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_5/appointment_1.png" alt="" width="100%;"/>
    </div>
    <div id="layer-photos-12" class="H-flex-item H-margin-horizontal-left-20" onclick="appointment_2();">
        <img src="__PUBLIC__/images/help/orders_process/img_5/appointment_5.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_5/appointment_5.png" alt="" width="100%;"/>
    </div>
</div>
<img src="__PUBLIC__/images/help/orders_process/text_5.png" alt="" width="100%" align="left"/>

<div class="H-flexbox-horizontal H-float-left"
     style="background-image: url('__PUBLIC__/images/help/orders_process/img_6/bg_6.png');background-size: 100%">
    <div id="layer-photos-13" class="H-horizontal-center H-flex-item" onclick="have_appointmented_1();">
        <img src="__PUBLIC__/images/help/orders_process/img_6/have_appointmented_1.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_6/have_appointmented_1.png" alt="" width="100px;"/>
    </div>
</div>
<img src="__PUBLIC__/images/help/orders_process/text_6.png" alt="" width="100%" align="left"/>

<div class="H-flexbox-horizontal H-padding-horizontal-both-25 H-float-left"
     style="background-image: url('__PUBLIC__/images/help/orders_process/img_7/bg_7.png');background-size: 100%">
    <div id="layer-photos-14" class="H-flex-item H-margin-horizontal-right-20" onclick="reward_1();">
        <img src="__PUBLIC__/images/help/orders_process/img_7/reward_7.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_7/reward_7.png" alt="" width="100%;"/>
    </div>
    <div id="layer-photos-15" class="H-flex-item H-margin-horizontal-left-20" onclick="reward_2();">
        <img src="__PUBLIC__/images/help/orders_process/img_7/reward_8.png"
             layer-src="__PUBLIC__/images/help/orders_process/img_7/reward_8.png" alt="" width="100%;"/>
    </div>
</div>
<img src="__PUBLIC__/images/help/orders_process/text_7.png" alt="" width="100%" align="left"/>
</body>
<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/layer/layer.js"></script>
<script type="text/javascript">
    $(function() {
        FastClick.attach(document.body);
    });
    function to_be_the_bner_2() {
        layer.photos({
            photos: '#layer-photos-1',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function to_be_the_bner_3() {
        layer.photos({
            photos: '#layer-photos-2',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function to_be_the_bner_4() {
        layer.photos({
            photos: '#layer-photos-3',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function to_be_the_bner_5() {
        layer.photos({
            photos: '#layer-photos-4',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function to_be_the_bner_6() {
        layer.photos({
            photos: '#layer-photos-5',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function to_be_the_bner_7() {
        layer.photos({
            photos: '#layer-photos-6',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function listener_1() {
        layer.photos({
            photos: '#layer-photos-7',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function task_details_1() {
        layer.photos({
            photos: '#layer-photos-8',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function task_details_2() {
        layer.photos({
            photos: '#layer-photos-9',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function task_details_3() {
        layer.photos({
            photos: '#layer-photos-10',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function appointment_1() {
        layer.photos({
            photos: '#layer-photos-11',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function appointment_2() {
        layer.photos({
            photos: '#layer-photos-12',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function have_appointmented_1() {
        layer.photos({
            photos: '#layer-photos-13',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function reward_1() {
        layer.photos({
            photos: '#layer-photos-14',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }

    function reward_2() {
        layer.photos({
            photos: '#layer-photos-15',
            shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }
</script>
</html>